<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的博客</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
</head>
<body>
    <!-- 加载动画 -->
    <div class="loader">
        <div class="spinner"></div>
    </div>

    <!-- 返回顶部按钮 -->
    <button id="backToTop" title="返回顶部">
        <i class="fas fa-arrow-up"></i>
    </button>

    <header>
        <nav>
            <div class="logo">
                <img src="logo.png" alt="博客Logo">
                <span>我的博客</span>
            </div>
            <div class="nav-toggle">
                <span></span>
                <span></span>
                <span></span>
            </div>
            <ul class="nav-links">
                <li><a href="#home" class="active"><i class="fas fa-home"></i> 首页</a></li>
                <li><a href="#articles"><i class="fas fa-book"></i> 文章</a></li>
                <li><a href="#categories"><i class="fas fa-folder"></i> 分类</a></li>
                <li><a href="#about"><i class="fas fa-user"></i> 关于</a></li>
                <li><a href="#contact"><i class="fas fa-envelope"></i> 联系</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section class="hero">
            <div class="hero-content">
                <h1 class="typing-effect">欢迎来到我的博客</h1>
                <p>分享技术、生活和有趣的故事</p>
                <div class="search-box">
                    <input type="text" placeholder="搜索文章...">
                    <button><i class="fas fa-search"></i></button>
                </div>
            </div>
            <div class="hero-stats">
                <div class="stat">
                    <i class="fas fa-file-alt"></i>
                    <span class="number">100+</span>
                    <span class="label">文章</span>
                </div>
                <div class="stat">
                    <i class="fas fa-users"></i>
                    <span class="number">5k+</span>
                    <span class="label">读者</span>
                </div>
                <div class="stat">
                    <i class="fas fa-comments"></i>
                    <span class="number">1k+</span>
                    <span class="label">评论</span>
                </div>
            </div>
        </section>

        <section class="featured">
            <h2 class="section-title">精选文章</h2>
            
            <div class="articles-container">
                <!-- 左侧文章 -->
                <div class="column">
                    <article class="article">
                        <div class="tag">技术</div>
                        <h3>Vue3 组件开发实践</h3>
                        <p>探索Vue3组件开发的最佳实践与性能优化技巧...</p>
                        <div class="meta">
                            <span><i class="far fa-clock"></i> 2024-03-20</span>
                            <span><i class="far fa-eye"></i> 1.2k</span>
                        </div>
                    </article>

                    <article class="article">
                        <div class="tag">设计</div>
                        <h3>2024设计趋势解析</h3>
                        <p>探讨新一年的设计趋势和用户体验创新...</p>
                        <div class="meta">
                            <span><i class="far fa-clock"></i> 2024-03-19</span>
                            <span><i class="far fa-eye"></i> 856</span>
                        </div>
                    </article>
                </div>

                <!-- 右侧文章 -->
                <div class="column">
                    <article class="article">
                        <div class="tag">生活</div>
                        <h3>程序员的生活方式</h3>
                        <p>探讨如何平衡工作与生活，保持健康的生活节奏...</p>
                        <div class="meta">
                            <span><i class="far fa-clock"></i> 2024-03-18</span>
                            <span><i class="far fa-eye"></i> 723</span>
                        </div>
                    </article>

                    <article class="article">
                        <div class="tag">技术</div>
                        <h3>AI开发工具指南</h3>
                        <p>最新AI开发工具的使用技巧与实践经验分享...</p>
                        <div class="meta">
                            <span><i class="far fa-clock"></i> 2024-03-17</span>
                            <span><i class="far fa-eye"></i> 945</span>
                        </div>
                    </article>
                </div>
            </div>
        </section>

        <section class="categories">
            <h2 class="section-title">文章分类</h2>
            <div class="category-grid">
                <a href="#" class="category-card">
                    <i class="fas fa-code"></i>
                    <h3>编程技术</h3>
                    <span>28 篇文章</span>
                </a>
                <a href="#" class="category-card">
                    <i class="fas fa-paint-brush"></i>
                    <h3>设计艺术</h3>
                    <span>15 篇文章</span>
                </a>
                <a href="#" class="category-card">
                    <i class="fas fa-camera"></i>
                    <h3>摄影作品</h3>
                    <span>32 篇文章</span>
                </a>
                <a href="#" class="category-card">
                    <i class="fas fa-book"></i>
                    <h3>读书笔记</h3>
                    <span>45 篇文章</span>
                </a>
            </div>
        </section>

        <section class="latest-posts">
            <div class="section-header">
                <h2 class="section-title">最新文章</h2>
                <div class="view-options">
                    <button class="view-grid active"><i class="fas fa-th-large"></i></button>
                    <button class="view-list"><i class="fas fa-list"></i></button>
                </div>
            </div>

            <div class="latest-grid">
                <!-- 最新文章1 -->
                <article class="latest-post">
                    <div class="post-thumbnail">
                        <img src="latest1.jpg" alt="最新文章1">
                        <div class="post-badges">
                            <span class="post-category">技术</span>
                            <span class="post-new">NEW</span>
                        </div>
                        <div class="post-overlay">
                            <div class="overlay-content">
                                <a href="#" class="quick-read">快速阅读</a>
                                <a href="#" class="save-later"><i class="far fa-bookmark"></i></a>
                            </div>
                        </div>
                    </div>
                    <div class="post-content">
                        <div class="post-header">
                            <div class="post-meta">
                                <span><i class="far fa-calendar"></i> 2024-03-20</span>
                                <span><i class="far fa-clock"></i> 8分钟阅读</span>
                            </div>
                            <h3>Vue3性能优化实践指南</h3>
                        </div>
                        <p class="post-excerpt">探索Vue3应用性能优化的关键技巧和最佳实践...</p>
                        <div class="post-footer">
                            <div class="post-stats">
                                <span><i class="far fa-eye"></i> 526</span>
                                <span><i class="far fa-comment"></i> 18</span>
                            </div>
                            <a href="#" class="read-more">阅读全文 <i class="fas fa-arrow-right"></i></a>
                        </div>
                    </div>
                </article>
            </div>
        </section>
    </main>

    <footer>
        <div class="footer-content">
            <div class="footer-section">
                <h3>关于博主</h3>
                <p>热爱技术、热爱生活的程序员，致力于分享有价值的内容。</p>
                <div class="social-links">
                    <a href="#"><i class="fab fa-github"></i></a>
                    <a href="#"><i class="fab fa-weibo"></i></a>
                    <a href="#"><i class="fab fa-zhihu"></i></a>
                </div>
            </div>
            <div class="footer-section">
                <h3>快速链接</h3>
                <ul>
                    <li><a href="www.hanyuxin.cn">首页</a></li>
                    <li><a href="#">关于我</a></li>
                    <li><a href="#">文章归档</a></li>
                    <li><a href="#">联系方式</a></li>
                </ul>
            </div>
            <div class="footer-section">
                <h3>联系我</h3>
                <p><i class="fas fa-envelope"></i> email@example.com</p>
                <p><i class="fas fa-map-marker-alt"></i> 中国，北京</p>
            </div>
        </div>
        <div class="footer-bottom">
            <p>&copy; 2024 寒雨馨的个人博客. 保留所有权利.</p>
        </div>
    </footer>

    <script src="script.js"></script>
</body>
</html> 